// gulp 打包的配置文件
// 导入 gulp 第三方包来实现打包配置的书写
const gulp = require('gulp')
const cssmin = require('gulp-cssmin')
const autoprefixer = require('gulp-autoprefixer')
const uglify = require('gulp-uglify')
const babel = require('gulp-babel')
const htmlmin = require('gulp-htmlmin')
const fileinclude = require('gulp-file-include')
// const imagemin = require('gulp-imagemin')
const del = require('del')

// 1. 配置一个 打包 css 文件的任务
const cssHandler = () => {
  return gulp
    .src('./src/css/*.css')
    .pipe(autoprefixer()) // 自动添加前缀
    .pipe(cssmin()) // 进行打包操作
    .pipe(gulp.dest('./dist/css/')) // 存储到指定位置
}

// 2. sass

//   3. 打包 js 文件的任务
const jsHandler = () => {
  // 书写打包 js 文件的流程
  return gulp
    .src('./src/js/*.js')
    .pipe(babel({ presets: ['@babel/preset-env'] })) // 把 ES6 转换成 ES5 语法
    .pipe(uglify()) // 进行压缩处理
    .pipe(gulp.dest('./dist/js/')) // 放在指定目录内
}

//   4. 打包 html 文件的任务
const htmlHandler = () => {
  // 打包 html 文件的 任务流程
  return gulp
    .src('./src/views/*.html')
    .pipe(fileinclude({  // 进行 html 组件的组装
      // 你的组件文件所存储的路径, 你的 html 片段文件, 存放的目录
      basepath: './src/components/',
      // 你自己定义的特殊标识符
      // 你在html 文件内书写这个标识符的时候, 表示你要使用 fileinclude 语法了
      prefix: '@-@'
    }))
    .pipe(htmlmin({ // 进行压缩处理
      // 表示把多余的空白内容去掉
      // collapseWhitespace: true,
      // 表示把布尔类型属性简化书写
      collapseBooleanAttributes: true,
      // 去除双引号
      removeAttributeQuotes: true,
      // 移出空属性
      removeEmptyAttributes: true,
      // 移除注释
      removeComments: true,
      // 移除 script 标签身上默认的 type 属性
      removeScriptTypeAttributes: true,
      // 移出 link 标签和 style 标签身上的默认 type 属性
      removeStyleLinkTypeAttributes: true,
      // 压缩内嵌式 css 样式
      minifyCSS: true,
      // 压缩内嵌式 js 代码
      minifyJS: true
    }))
    .pipe(gulp.dest('./dist/views/')) // 进行转存到指定文件夹内
}

//  5. 打包 图片 文件
const imgHandler = () => {
  // 书写打包 img 文件的流程
  return gulp
    .src('./src/images/*.**')
    // .pipe(imagemin()) // 进行压缩操作
    .pipe(gulp.dest('./dist/images/')) // 进行转存到指定位置
}
// 6. 视音频文件
//   7. 转存 fonts 文件
const fontHandler = () => {
  return gulp
    .src('./src/fonts/*.**')
    .pipe(gulp.dest('./dist/fonts/'))
}

//   8. 配置一个删除任务
const delHandler = () => {
  return del(['./dist/'])
}

// 配置一个综合任务
const _default = gulp.series(
  delHandler,
  gulp.parallel(cssHandler, htmlHandler, jsHandler, imgHandler, fontHandler),
)

// 导出你创建的所有任务
module.exports = {
  cssHandler,
  jsHandler,
  htmlHandler,
  imgHandler,
  fontHandler,
  delHandler,
  default: _default
}